{% extends "layout.html" %}

{% block subtitle %}{{ topic }}{% endblock %}
{% from "snippet/macro.html" import navigation, pagination, form_field %}

{% block nav %}
  {{ navigation('topic') }}
{% endblock %}

{% block content %}
  <div class="panel panel-default hentry">
    <div class="panel-heading">
      <div class="vcard">
        <a href="{{ url_for('user.view', username=topic.author.username) }}">
          <img src="{{ topic.author.avatar(48) }}" width="48" height="48" alt=""/>
        </a>
      </div>
      <div class="entry-meta-wrapper">
        <h1 class="panel-title entry-title">{{ topic.title }}</h1>

        <div class="entry-meta text-muted">
          <a href="{{ url_for('user.view', username=topic.author.username) }}"
                   title="{{ topic.author }}">{{ topic.author.username }}</a>
          <span class="sep">•</span>
          <time datetime="{{ topic.created|xmldatetime }}" pubdate>{{ topic.created|timesince }}</time>
          <span class="sep">•</span>
          <a class="label label-node" href="{{ url_for('node.view', urlname=topic.node.urlname) }}">{{ topic.node }}</a>
          <span class="sep">•</span>
          {{ topic.hits }} {{ _('Hits') }}
        </div>
      </div>
    </div>
    <div class="panel-body entry-content">
      {{ topic.content|markdown|safe }}
    </div>
    <div class="panel-footer text-muted clearfix">
      <div class="pull-right">
        <div class="like-topic" data-count="" data-topic="{{ topic.id }}">
          {% if topic.like %}
            <span class="glyphicon glyphicon-heart"></span>
          {% elif g.user %}
            <span class="glyphicon glyphicon-heart-empty"></span>
          {% else %}
            <a class="glyphicon glyphicon-heart-empty" href="{{ url_for('account.signin') }}"></a>
          {% endif %}
        </div>
        {% if g.user and (g.user.is_staff or g.user.id == topic.account_id) %}
          <a href="{{ url_for('topic.edit', uid=topic.id) }}">{{ _('Edit') }}</a>
          <span class="sep">•</span>
          <a href="{{ url_for('topic.move', uid=topic.id) }}">{{ _('Move') }}</a>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
      {{ paginator.total }} comments
    </div>
    <div class="panel-columns comments">
      {% if paginator.items %}
        {% for item in paginator.items %}
          <div class="item comment">
            <a class="avatar" href="{{ url_for('user.view', username=item.user.username) }}"
               title="{{ item.user }}"><img src="{{ item.user.avatar(42) }}"/></a>

            <div class="main">
              <div class="author">
                <a href="{{ url_for('user.view', username=item.user.username) }}"
                   title="{{ item.user }}">{{ item.user.username }}</a>
                <time datetime="{{ item.created|xmldatetime }}" pubdate>{{ item.created|timesince }}</time>
              </div>
              <div class="content">{{ item.content|markdown('plain')|safe }}</div>
              <div class="action clearfix">
                {% if g.user and (g.user.is_staff or g.user.id == item.account_id) %}
                  <a class="delete" href="#{{ item.id }}" title="{{ _('Delete') }}">
                    <i class="glyphicon glyphicon-trash"></i>
                  </a>
                {% endif %}
                <a class="reply" href="#{{ item.user.username }}">{{ _('Reply') }}</a>
              </div>
            </div>
          </div>
        {% endfor %}
      {% else %}
        <div class="panel-body">
          <div class="alert alert-info">{{ _('No replies yet.') }}</div>
        </div>
      {% endif %}
    </div>

    {% if paginator.pages > 1 %}
      <div class="panel-footer">
        {{ pagination(paginator, url_for('topic.view', uid=topic.id)) }}
      </div>
    {% endif %}
  </div>

  <div class="panel panel-default">
    {% if form %}
      <form class="form panel-body comment-form" action="{{ url_for('topic.reply', uid=topic.id) }}" method="post">
        {{ form.csrf_token }}
        {{ form_field(form.content, False) }}
        <div class="form-submit text-right">
          <button data-target="#content" class="btn btn-default preview-button">{{ _('Preview') }}</button>
          <button class="btn btn-success">{{ _('Send a Reply') }}</button>
        </div>
      </form>
    {% else %}
      <div class="panel-body">
        <div class="alert alert-info">{{ _('Login is required.') }}</div>
        <a href="{{ url_for('account.signin') }}" class="btn btn-success">{{ _('Sign In') }}</a>
      </div>
    {% endif %}
  </div>
{% endblock %}


{% block sidebar %}
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">{{ topic.node }}</h3>
    </div>
    <div class="panel-body">
      {{ topic.node.description|markdown|safe }}
    </div>
    <div class="panel-footer">
      <a class="btn btn-info" href="{{ url_for('node.view', urlname=topic.node.urlname) }}">
        {{ _('Topics in this node') }}
      </a>
    </div>
  </div>
{% endblock %}

{% block afterscript %}
  <script>
    (function() {
      require('june').jQuery.post('');
    })();
  </script>
{% endblock %}
